$size: 44px;
$ellipse: $size / 2;
$speed: 2;
$color-primary: #61dafb;
$border: $size/16;
$circle: $ellipse/10;
$total: 3;
$angle: 66deg;

%path {
  border-radius: 50%;
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

.container {
  --size: #{$size};
  --ellipse: calc(var(--size) / 2);
  --circle: calc(var(--ellipse) / 10);
  --speed: #{$speed};
  --background: #{$color-primary};
  --angle: #{$angle};

  display: block;
  height: var(--size);
  position: relative;
  transform: rotate(180deg);
  width: var(--size);
  z-index: 1000;

  &:before {
    content: ' ';
    background-color: var(--background);
    border-radius: calc(var(--size) / 12);
    display: block;
    height: calc(var(--size) / 6);
    left: calc(50% - (var(--size) / 12));
    position: absolute;
    top: calc(50% - (var(--size) / 12));
    width: calc(var(--size) / 6);
    z-index: 1;
  }

  > span {
    @extend %path;
    width: calc(var(--ellipse) * 2);
    height: calc(var(--ellipse) * 2);
    border: $border var(--background) solid;
    transform-style: preserve-3d;
    &:before {
      @extend %path;
      content: ' ';
      width: calc(var(--circle) * 2);
      height: calc(var(--circle) * 2);
      animation: path linear infinite;
      background: var(--background);
      display: block;
    }

    @for $i from 1 through $total {
      &:nth-child(#{$i}) {
        transform: rotateZ($i * 180deg / $total) rotateY(var(--angle));

        &:before {
          animation-duration: #{$speed * $i * 0.5}s;
        }
      }
    }
  }
}

@keyframes path {
  from {
    transform: rotateZ(0) translateX($ellipse) rotateZ(0) rotateY(var(--angle));
  }
  to {
    transform: rotateZ(360deg) translateX($ellipse) rotateZ(-360deg)
      rotateY(var(--angle));
  }
}
